<template>
	<view class="category">
		<!-- 头部搜索按钮 -->
		<view class="header">
			<view class="search">商品搜索</view>
		</view>

		<!-- 身体内容区域 -->
		<view class="mainer">
			<!-- 左侧分类页 -->
			<view class="mainerLeft">
				<scroll-view class="scrollLeft" scroll-y="true">
					<!-- <view class="active leftItem">弄好呀</view>
					<view v-for="(item, index) in 10" :key="index" class="leftItem">都挺不错</view> -->
					<view
						class="leftItem"
						:class="{ active: categoryNum === index, a: categoryNum === index }"
						v-for="(item, index) in categoryData"
						:key="index"
						@click="changeIndex(index)"
					>
						{{ item.name }}
					</view>
				</scroll-view>
			</view>
			<!-- 右侧展示页 -->
			<view class="mainerRight">
				<scroll-view class="scrollRight" scroll-y="true">
					<view class="rightMain">
						<!-- <image :src="categoryData[categoryNum].imgUrl" mode=""></image> -->
						<image class="showPic" :src="cateObj.imgUrl" mode=""></image>
						<view class="picItem">
							<view class="goodsItem" v-for="(item, index) in categoryData[categoryNum].subCateList">
								<image class="goodsPic" :src="item.wapBannerUrl" mode=""></image>
								<view class="goodsName">{{ item.name }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '../../utils/request.js';
export default {
	name: 'category',
	data() {
		return {
			categoryData: [],
			categoryNum: 0
		};
	},
	created() {
		this.getCategoryData();
	},
	// 可以使用计算属性来保证侧边栏与内容区域的联动
	computed: {
		cateObj() {
			return this.categoryData[this.categoryNum];
		}
	},
	methods: {
		async getCategoryData() {
			const res = await api('/getCategoryData');
			this.categoryData = res.data;
			console.log(res);
		},
		changeIndex(id) {
			this.categoryNum = id;
		}
	}
};
</script>

<style lang="stylus">
.category
	.header
		padding 20rpx
		.search
			width 90%
			margin 0 auto
			border-radius 8rpx
			height 60rpx
			line-height 60rpx
			font-size 30rpx
			color #fff
			text-align center
			background-color #BB2c08
	.mainer
		border-top 3rpx solid #bb2c08
		// 计算动态高度 适配不同机型
		height calc(100vh - 103rpx)
		display flex
		.mainerLeft
			width 20%
			height 100%
			border-right 3rpx solid #bb2c08
			.scrollLeft
				// height calc(100vh - 103rpx)
				height 100%
				.leftItem
					height 60rpx
					line-height 60rpx
					font-size 26rpx
					text-align center
					position relative
					// 父级引用 点击高亮显示
					&.active::before
						content ''
						width 2rpx
						height 42rpx
						background-color #bb2c08
						position absolute
						left 10rpx
						top 10rpx
					// 点击标签样式
					&.a
						color #fff
						font-weight 800
						background-color #bb2c08
		.mainerRight
			width 80%
			height 100%
			.scrollRight
				height 100%
				.rightMain
					.showPic
						width 520rpx
						height 200rpx
						display block
						margin 15rpx auto
					.picItem
						display flex
						flex-wrap wrap
						.goodsItem
							width 33.33%
							height 200rpx
							text-align center
							.goodsPic
								width 90%
								height 140rpx
							.goodsName
								font-size 26rpx
</style>
